<!-- Mobile top header -->
<div class="mobile fm-header ">
    <a class="mobile fm-icon mega left"></a>
    <div class="mobile pages-menu-dropdown">
        <span>[$169]</span>
        <i class="top-menu-icon menus-sprite right-arrow"></i>
    </div>
    <div class="mobile fm-icon top-icon menu right"></div>
    <div class="mobile fm-header-txt"><span class="mobile main-top-header-text"></span></div>
</div>

<!-- Mobile Recover Account header
     Remove the hidden class and apply it to the top mobile fm-header block.
     This block should be fixed in place. -->
<div class="mobile forgot-password-page hidden">
    <div class="mobile fm-header fm-hr">
        <div class="mobile fm-icon top-icon menu right"></div>
        <div class="mobile fm-icon back left"></div>
        <div class="mobile recover-acc-header fm-header-txt"><span>[$19826]</span></div>
        <div class="mobile recover-acc-subheader fm-subheader-txt"><span></span></div>
    </div>
</div>

<!-- Mobile business payment overdue !-->
<div class="mobile bus-repay hidden">
    <div class="mobile fm-header fm-hr">
        <a class="mobile fm-icon mega left"></a>
        <div class="mobile fm-icon top-icon menu right"></div>
        <div class="mobile recover-acc-header fm-header-txt"><span>[$20471]</span></div>
    </div>
</div>
<!-- Mobile main menu !-->
<div class="mobile dark-overlay"></div>
<div class="mobile top-menu-popup o-hidden">
    <i class="top-menu-icon menus-sprite close"></i>
    <div class="top-menu-scroll">
        <div class="top-menu-content">

            <div class="top-menu-logged">
                <div class="top-menu-account-info">
                    <div class="avatar-block">
                        <div class="wrapper"></div>
                        <div class="activity-status-block js-activity-status">
                            <div class="loading-animation"></div>
                            <div class="activity-status top offline"></div>
                        </div>
                    </div>
                    <div class="user-info">
                        <div class="name"></div>
                        <div class="email"></div>
                    </div>
                </div>
                <div class="user-info">
                    <div class="name"></div>
                    <div class="email"></div>
                </div>
                <div class="clear"></div>

                <div class="plan"></div>
                <div class="storage hidden">
                    <span></span>
                </div>
                <div class="loader menus-sprite"></div>
                <div class="storage-txt">
                </div>
                <div class="top-green-button upgrade-your-account">
                    [$433]
                </div>
            </div>

            <div class="top-menu-item start">
                <i class="top-menu-icon menus-sprite mega"></i>
                <span>[$1888]</span>
            </div>
            <div class="top-menu-item login">
                <i class="top-menu-icon menus-sprite login"></i>
                <span>[$171]</span>
            </div>
            <div class="top-menu-item register">
                <i class="top-menu-icon menus-sprite register"></i>
                <span>[$968]</span>
            </div>
            <div class="top-menu-divider small-pad bg"></div>

             <div class="top-menu-item backup keybackup small-pad">
                 <i class="top-menu-icon menus-sprite export"></i>
                 <span>[$8921]</span>
            </div>
            <div class="top-menu-divider small-pad bg hidden"></div>

            <div class="top-menu-item fm">
                <i class="top-menu-icon menus-sprite mega"></i>
                <span>[$164]</span>
            </div>

            <!-- Products -->
            <div class="top-menu-item submenu-item">
                <i class="sprite-fm-mono icon-features"></i>
                <span>[$footer_heading_products]</span>
                <i class="sprite-fm-mono icon-arrow-right right-arrow"></i>
            </div>
            <div class="top-submenu">
                <div class="top-menu-item storage">[$footer_item_cloud_storage]</div>
                <div class="top-menu-item objectstorage">[$footer_item_object_storage]</div>
                <div class="top-menu-item vpn">[$vpn]</div>
                <div class="top-menu-item pass">[$password_manager]</div>
                <div class="top-menu-item syncing">[$footer_item_sync]</div>
                <div class="top-menu-item megabackup">[$ft_backup_tab]</div>
                <div class="top-menu-item share">[$footer_item_share]</div>
                <div class="top-menu-item media-files">[$footer_item_media_files]</div>
                <div class="top-menu-item chatandmeetings">[$footer_item_chat_meetings]</div>
                <div class="top-menu-item business">[$19530]</div>
            </div>
            <!-- Solutions -->
            <div class="top-menu-item submenu-item">
                <i class="sprite-fm-mono icon-lightbulb-small-regular-outline"></i>
                <span>[$footer_heading_solutions]</span>
                <i class="sprite-fm-mono icon-arrow-right right-arrow"></i>
            </div>
            <div class="top-submenu">
                <div class="top-menu-item individuals">[$footer_item_individuals]</div>
                <div class="top-menu-item freelancers">[$footer_item_freelancers]</div>
                <div class="top-menu-item small-business">[$footer_item_small_business]</div>
            </div>
            <!-- Platforms -->
            <div class="top-menu-item submenu-item">
                <i class="sprite-fm-mono icon-platforms"></i>
                <span>[$23327]</span>
                <i class="sprite-fm-mono icon-arrow-right right-arrow"></i>
            </div>
            <div class="top-submenu">
                <div class="top-menu-item mobile">[$955]</div>
                <div class="top-menu-item desktop">[$1626]</div>
                <div class="top-menu-item extensions">[$16603]</div>
                <div class="top-menu-item cmd">[$footer_item_cmd]</div>
                <div class="top-menu-item nas">[$footer_item_cmd_for_nas]</div>
            </div>
            <!-- Plans -->
            <div class="top-menu-item submenu-item plans">
                <i class="sprite-fm-mono icon-plan"></i>
                <span>[$footer_heading_plans]</span>
                <i class="sprite-fm-mono icon-arrow-right right-arrow"></i>
            </div>
            <div class="top-submenu">
                <div class="top-menu-item pro">[$1361]</div>
                <div class="top-menu-item achievements">[$16117]</div>
            </div>
            <!-- Resources -->
            <div class="top-menu-item submenu-item">
                <i class="sprite-fm-mono icon-developers"></i>
                <span>[$footer_heading_resources]</span>
                <i class="sprite-fm-mono icon-arrow-right right-arrow"></i>
            </div>
            <div class="top-submenu">
                <div class="top-menu-item blog blogarticle">[$389]</div>
                <div class="top-menu-item security">[$footer_item_security_privacy]</div>
                <div class="top-menu-item reliability">[$23064]</div>
                <div class="top-menu-item developers">[$392]</div>
                <div class="top-menu-item resellers">[$391]</div>
            </div>
            <!-- Help -->
            <div class="top-menu-item submenu-item">
                <i class="sprite-fm-mono icon-support"></i>
                <span>[$footer_heading_help]</span>
                <i class="sprite-fm-mono icon-arrow-right right-arrow"></i>
            </div>
            <div class="top-submenu">
                <div class="top-menu-item help">[$384]</div>
                <div class="top-menu-item contact">[$399]</div>
                <div class="top-menu-item bug-bounty">[$footer_item_bug_bounties]</div>
                <div class="top-menu-item support">[$383]</div>
            </div>
            <!-- Company -->
            <div class="top-menu-item submenu-item">
                <i class="sprite-fm-mono icon-company"></i>
                <span>[$23328]</span>
                <i class="sprite-fm-mono icon-arrow-right right-arrow"></i>
            </div>
            <div class="top-submenu">
                <div class="top-menu-item about">[$396]</div>
                <div class="top-menu-item media">[$16645]</div>
            </div>
            <!-- Legal -->
            <div class="top-menu-item submenu-item">
                <i class="sprite-fm-mono icon-legal-policies"></i>
                <span>[$518]</span>
                <i class="sprite-fm-mono icon-arrow-right right-arrow"></i>
            </div>
            <div class="top-submenu">
                <div class="top-menu-item terms">[$385]</div>
                <div class="top-menu-item privacy">[$386]</div>
                <div class="top-menu-item copyright">[$387]</div>
                <div class="top-menu-item takedown">[$966]</div>
                <div class="top-menu-item transparency">[$22681]</div>
                <div class="top-menu-item cookie">[$24629]</div>
                <div class="top-menu-item cookies-settings">[$24644]</div>
                <div class="top-menu-item dispute">[$footer_item_dispute]</div>
            </div>

            <div class="top-menu-divider"></div>

            <div class="top-menu-item submenu-item languages small-pad">
                 <i class="top-menu-icon menus-sprite globe"></i>
                 <span></span>
                 <i class="top-menu-icon menus-sprite right-arrow inline down"></i>
            </div>
            <div class="top-submenu language-items">
                <div class="top-menu-item language-template">
                    <span class="lang-name"></span>
                    <span class="beta-text">[$5907]</span>
                </div>
            </div>

            <div class="top-menu-divider small-pad"></div>

            <div class="top-social-bl">
                <div class="top-social-txt">
                    [$follow_social_header]
                </div>
                <a href="https://www.facebook.com/MEGAprivacy" target="_blank" rel="noopener noreferrer" class="top-social-button">
                     <i class="top-menu-icon menus-sprite fb"></i>
                </a>
                <a href="https://www.instagram.com/MEGA_privacy/" target="_blank" rel="noopener noreferrer" class="top-social-button">
                    <i class="top-menu-icon menus-sprite instagram"></i>
                </a>
                <a href="https://twitter.com/MEGAprivacy" target="_blank" rel="noopener noreferrer" class="top-social-button">
                    <i class="top-menu-icon menus-sprite twitter"></i>
                </a>
                <a href="https://www.linkedin.com/company/mega-the-privacy-company" target="_blank" rel="noopener noreferrer" class="top-social-button">
                    <i class="top-menu-icon menus-sprite linkedin"></i>
                </a>
                <a href="https://www.youtube.com/channel/UCL0n8SACU_eghsvHxbizKCA" target="_blank" rel="noopener noreferrer" class="top-social-button">
                    <i class="top-menu-icon menus-sprite youtube"></i>
                </a>
                <div class="clear"></div>
            </div>

            <div class="top-mega-version">
                v. dev
            </div>
            <div class="top-menu-item top-white-button logout">
                [$967]
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>

<!-- Loading overlay -->
<div class="dark-overlay hidden" id="loading-overlay"></div>
<div class="light-overlay hidden"></div>
<div class="slideshow-overlay hidden"></div>
<div class="fm-dialog-overlay hidden"></div>

<!-- Loading progress / spinner -->
<div class="mobile loading-spinner hidden" id="loading-spinner">
    <div class="main-loader"></div>
    <ul class="loading-info">
        <li class="step3">[$8579]</li>
        <li class="step2">[$8578]</li>
        <li class="step1">[$8577]</li>
    </ul>
    <div class="loader-progressbar">
        <div class="loader-percents"></div>
    </div>
</div>

<!-- Park account dialog
     this dialog appears at the end of account recovery process -->
<div class="mobile mega-dialog-container hidden">
    <div class="mega-dialog mobile park-account-dialog hidden">
        <header>
            <div class="fm-dialog-title">[$18307]</div>
            <div class="fm-dialog-close"></div>
            <div class="clear"></div>
        </header>
        <div class="fm-dialog-body improved-recovery-steps">
            <div class="checkbox-block park-account-checkbox">
                <div class="info-container">
                    <div class="settings-row">
                        <div class="">
                            <!-- The checkbox and the label should enable/disable the feature. The inputs should only work when the feature is enabled. Otherwise prevent them from interacting with the input -->
                            <div class="checkdiv checkboxOff">
                                <input type="checkbox" id="" class="checkboxOff" />
                            </div>
                            <label for="" class="radio-txt">[$18312]</label>
                            <!-- Add enabled class to embed-setting to this div to remove the disabled styling -->
                        </div>
                    </div>
                    <div class="settings-row">
                        <div class="">
                            <!-- The checkbox and the label should enable/disable the feature. The inputs should only work when the feature is enabled. Otherwise prevent them from interacting with the input -->
                            <div class="checkdiv checkboxOff">
                                <input type="checkbox" id="" class="checkboxOff" />
                            </div>
                            <label for="" class="radio-txt">[$19851]</label>
                            <!-- Add enabled class to embed-setting to this div to remove the disabled styling -->
                        </div>
                    </div>
                    <div class="settings-row">
                        <div class="">
                            <!-- The checkbox and the label should enable/disable the feature. The inputs should only work when the feature is enabled. Otherwise prevent them from interacting with the input -->
                            <div class="checkdiv checkboxOff">
                                <input type="checkbox" id="" class="checkboxOff" />
                            </div>
                            <label for="" class="radio-txt">[$18308]</label>
                            <!-- Add enabled class to embed-setting to this div to remove the disabled styling -->
                        </div>
                    </div>
                </div>
            </div>
            <input class="underlinedText withIcon" type="text" name="recover-input1" id="recover-input1-di" value="" placeholder="[$195]" maxlength="190" data-icon="sprite-fm-mono icon-email">
            <!-- Only show this div when all the checkboxes have been ticked and the email field has been filled in. -->
            <div class="content-highlight warning">
                <div class="highlight-wrapper">
                    <div class="warning-icon"></div>
                    <div class="content-text">
                        [$18309]
                    </div>
                </div>
            </div>
        </div>
        <div class="fm-notifications-bottom mobile buttons inline-buttons">
            <div class="mobile red-button second closebtn"><span>[$82]</span></div>
            <div class="mobile red-button first parkbtn"><span>[$1947]</span></div>
        </div>
    </div>
</div>
